<script>
import { addAdminFn, getAdminListFn, updateAdminFn } from '@/api/user';
import { Edit, Delete } from '@element-plus/icons-vue'
import { routes } from '@/router'
export default {
    name: 'ManagerList',
    data() {
        return {
            current: 1,
            // 树形组件的数据
            routes: routes[0].children,
            // 管理员列表
            adminList: [],
            // 是否显示添加模块
            drawer: false,
            // 提交服务器的数据
            formData: {
                adminname: '',
                password: '',
                role: 1,
                checkedKeys: []
            },

            // 是否显示对话框
            dialogTableVisible: false,
            // 默认选中的节点
            defaultCheckedKeys: [],
        }
    },
    methods: {
        // 获取树形组件选择的内容
        getTreeChange(type) {
            // getCheckedNodes(true)只拿子级节点，后面通过子节点来找父节点
            // console.log(this.$refs.addTree.getCheckedNodes(true));

            let list =[]
            if(type=='add'){
                // 两种不同树形组件选择内容，添加
                list= this.$refs.addTree.getCheckedNodes(true);
            }else{
                // 编辑
                list= this.$refs.editTree.getCheckedNodes(true);
            }
            // 放父亲路由的label
            const tempList = []
            // 放最终结果
            const result = []
            //遍历所有子节点
            list.forEach(item => {
                // 找到选中的子节点的父级节点
                const parent = this.routes.find(child => {
                    // 找到所有子级节点 子节点某一项存在于保存的list中则返回
                    return child.children.some(secItem => {
                        return secItem.label == item.label
                    })
                })

                // console.log(parent);
                if (tempList.includes(parent.label)) {
                    // 已经存在,找到父路由,没啥用待优化
                    const par = result.find(item => {
                        return item.label == parent.label
                    })
                    // 找到父路由后添加被选中的子级
                    par.children.push(item)
                } else {
                    tempList.push(parent.label)
                    // 添加父级对象以及其子节点
                    result.push({
                        label: parent.label,
                        path: parent.path,
                        icon: parent.icon,
                        children: [item]
                    })
                }
            });
            // console.log(1111,result);
        },
        async addClick() {
            // console.log(routes);
            // console.log(this.formData);
            // 获取当前被选中的内容
            this.getTreeChange('add')
            // 发生添加管理员的api请求
            const res = await addAdminFn(this.formData)
            console.log(res);

        },
        // 点击编辑按钮
        editClick(row) {

            this.dialogTableVisible = true
            // console.log(row);
            // 深拷贝，目的是避免修改原数据，新对象与原始对象在内存中占据不同的空间
            this.formData = JSON.parse(JSON.stringify(row))
            // this.$refs.editTree.setCheckedNodes(row.routes)
            // 记录当前被选中的节点
            const list = []
            // 获取父级节点
            row.checkedKeys.forEach(parent => {
                if (parent.children) {
                    // 有子路由
                    parent.children.forEach(child => {
                        // 加入子路由
                        list.push(child.path)
                    })
                } else {
                    // 没有子路由
                }
            })
            this.defaultCheckedKeys = list

        },
        // 编辑对话框关闭，来使选中的keys重置（我用的watch+$nextTick）
        editClose() {
            // this.defaultCheckedKeys = []
            console.log('关闭重置keys');

        },
        // 修改管理员提交按钮点击
        editSubmitClick() {
             // 获取当前被选中的内容
             this.getTreeChange()
             console.log(this.formData);
             
            // updateAdminFn(this.formData).then(res => {
            //     console.log(res);
                
            // })
        }
    },
    async mounted() {
        const res = await getAdminListFn()
        // console.log(res);
        this.adminList = res.data
    },
    components: {
        Edit, Delete
    },
    watch: {
        dialogTableVisible(val) {
            // 关闭弹窗，则将默认选中的key清空
            if (!val) {
                this.defaultCheckedKeys = [];
                // Vue的响应式更新是异步的，可能在 watch 触发后，DOM还没有更新。
                // $nextTick作用是确保 DOM 已经更新了,然后执行里面定义的回调
                this.$nextTick(() => {
                    if (this.$refs.editTree) {
                        this.$refs.editTree.setCheckedKeys([]);
                    }
                    // 恢复数据
                    this.formData = {
                        adminname: '',
                        password: '',
                        role: 1,
                        checkedKeys: []
                    };
                });
            }
        }
    },
    computed: {
        tableData() {
            return this.adminList.slice((this.current - 1) * 10, this.current * 10);
        }
    }
}
</script>
<template>
    <div style="width: 100%; overflow: auto;">
        <span style="margin-right: 10px;">管理员列表</span>
        <el-button @click="drawer = true">添加管理员</el-button>

        <el-table :data="tableData" style="width: 100%; margin-top:10px;">
            <el-table-column type="index" label="序号" width="80">
                <!-- 作用域插槽 -->
                <template #default="scope">
                    <el-tag>
                        {{ (current - 1) * 10 + scope.$index + 1 }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="adminname" label="管理员名称" width="180">
            </el-table-column>
            <el-table-column prop="role" label="管理员权限">
                <template #default="scope">
                    <!-- <el-tag type="primary" v-if="scope.row.role =='1'">普通管理员</el-tag>
                <el-tag type="success" v-else>超级管理员</el-tag> -->
                    <!-- 也可以一个三目运算 -->
                    <el-tag :type="scope.row.role == '1' ? 'primary' : 'success'">{{ scope.row.role
                        == '1' ? "普通管理员" : "超级管理员" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="adminid" label="管理员id" width="380">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="editClick(scope.row)">
                        <template #default>
                            <el-icon>
                                <Edit></Edit>
                            </el-icon>
                            &nbsp;编辑
                        </template>
                    </el-button>
                    <el-button type="danger" size="small">
                        <template #default>
                            <el-icon>
                                <Delete></Delete>
                            </el-icon>
                            &nbsp;删除
                            <!-- 中文的空格是&#x3000; -->
                        </template>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="current" background layout="prev, pager, next,jumper,->, total"
            :total="this.adminList.length" />

        <!-- 添加管理员模块 -->
        <el-drawer v-model="drawer" title="添加管理员">
            <el-form label-width="auto">
                <el-form-item label=" 管理员账号">
                    <el-input v-model="formData.adminname" placeholder="请输入管理员账号" />
                </el-form-item>
                <el-form-item label="管理员密码">
                    <el-input v-model="formData.password" placeholder="请输入管理员密码" />
                </el-form-item>
                <el-form-item label="管理员角色">
                    <el-select v-model="formData.role" placeholder="请选择管理员角色">
                        <el-option label="普通管理员" :value="1" />
                        <el-option label="超级管理员" :value="2" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-tree ref="addTree" show-checkbox default-expand-all :data="routes" />
            <el-button @click="addClick"> 添加管理员 </el-button>
        </el-drawer>


        <!-- 编辑管理员 -->
        <el-dialog @close="editClose" v-model="dialogTableVisible" title="编辑管理员" width="800">
            <el-form label-width="auto">
                <el-form-item label=" 管理员账号">
                    <el-input disabled v-model="formData.adminname" placeholder="请输入管理员账号" />
                </el-form-item>
                <el-form-item label="管理员密码">
                    <el-input disabled v-model="formData.password" placeholder="请输入管理员密码" />
                </el-form-item>
                <el-form-item label="管理员角色">
                    <el-select v-model="formData.role" placeholder="请选择管理员角色">
                        <el-option label="普通管理员" :value="1" />
                        <el-option label="超级管理员" :value="2" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-tree :default-checked-keys="defaultCheckedKeys" node-key="path" ref="editTree" show-checkbox
                default-expand-all :data="routes" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editSubmitClick">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>